<template>
<div>
  <zh-form :span="6"  ref="formInfo"   :model="formInfo"  labelAlign="right" >

    <zh-card title="督察信息" style="width:100%">
      <div style="padding: 15px 20px">
        <zh-row>
          <zh-input
              prop="b0102"
              :disabled="disabled"
              type="text"
              label="督察点位"
              v-model="formInfo.b0102"
          ></zh-input>

          <zh-input
              prop="g0402Name"
              :disabled="disabled"
              type="text"
              label="督察结果"
              v-model="formInfo.g0402Name"
          ></zh-input>
        </zh-row>
      </div>
    </zh-card>
  </zh-form>

  <zh-card title="督察问题"  mode="mode1" style="width: 100%;">
    <a-row >
      <a-col :span="16">
        <a-form-model-item label="问题描述：">
          <a-textarea
              v-model="formInfo.g1402"
              :disabled="disabled"
              :rows="3"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
  </zh-card>

  <a-divider orientation="left" style="font-size: 22px">现场照片(视频)</a-divider>
<!--  <zh-card title="" mode="mode1" style="width: 100%;">
    <viewer :images="formInfo.materialList" >
      <img v-for="data in formInfo.materialList"  :src="data.materialType == '2'?fileShowUrl+MP4ShowId:fileShowUrl+data.showId"
           @click="materialClick(data)" :key="data.showId" width="10%" height="10%"/>
    </viewer>
  </zh-card>-->
  <div class="photograph">
  <img
      v-for="(item, index) in photoList || []"
      :key="index"
      :src="item.src"
      @click="materialClick(item)"
      alt=""/>
  </div>
  <a-modal
      title="视频"
      v-model="videoShow"
      centered
      width="880px"
      destroyOnClose
      :footer="null"
  >
    <div class="ry-video-wrap">
      <video ref="videoPlayer" class="video-js">
        <p class="vjs-no-js">不支持播放</p>
      </video>
    </div>
  </a-modal>
</div>
</template>

<script>
import {fileShowUrl} from "@/services/system/api";
import {getInspectProblemDetails} from "@/services/system/whdngxlApi";

export default {
  name: "InspectProblemDetail",

  data() {
    return {
      formInfo:{
          b0102:'',
          g0402Name:'',
          materialList:[],//材料信息
          g1402:'',
      },
      disabled:false,
      videoShow: false,
    }
  },
  computed: {
    photoList() {
      return (this.formInfo.materialList || []).map((el) => {
        return {
          src:
              el.materialType == '1'
                  ? `${process.env.VUE_APP_FILE_BASE_URL}/api/common/file/show/whdn/${el.showId}`
                  : `${process.env.VUE_APP_FILE_BASE_URL}/api/common/file/show/whdn/7e0bb99fce9b4e2381fbf945d951fc28`,
          ...el,
        };
      });
    },
  },
  created() {

  },
  methods: {
    initData(data){
      if(data.g0401){

        this.formInfo.b0102 = data.b0102
        this.formInfo.g0402Name = data.g0402Name
        const params = {}
        params.g0401 = data.g0401
        this.$http.post(getInspectProblemDetails, params).then(res => {
          this.formInfo.g1402 = res.result.g1402
          this.formInfo.materialList = res.result.materialList
        })
      }
    },
    materialClick(data){
      if (data.materialType === "1") {
        this.$viewerApi({
          images: [data.src],
        });
      } else if (data.materialType === "2") {
        this.videoShow = true;
        this.$nextTick(() => {
          this.createVideo(data.showId);
        });
      }
    },
    createVideo(id) {
      let src =
          process.env.VUE_APP_FILE_BASE_URL + `/api/common/file/show/whdn/` + id;
      let options = {
        autoplay: false,
        controls: true,
        sources: [
          {
            src,
            type: "video/mp4",
          },
        ],
      };
      this.$video(this.$refs.videoPlayer, options);
    },
  },
}
</script>

<style lang="less" scoped>
.photograph {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
img {
  width: 120px;
  height: 90px;
  margin-right: 15px;
  margin-top: 15px;
  border-radius: 8px;
  cursor: pointer;
}
}
</style>